<template>
  <div class="visitorpie">
    <div id="visitorpie" class style="width: 90%;height:450px;"></div>
  </div>
</template>

<script>
import echarts from "echarts/lib/echarts";
// 引入柱状图
import "echarts/lib/chart/bar";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";

export default {
  mounted() {
    this.myChart = echarts.init(document.getElementById("visitorpie"));
    this.initData();
  },
  props: ["barData", "userData", "adminData", "orderData", "foodsData"],
  data() {
    return {
      resturants_count: null,
      user_count: null,
      admin_count: null,
      order_count: null,
      foods_count: null,
    };
  },
  methods: {
    initData() {
      const option = {
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "店铺数量",
              "商品数量",
              "用户数量",
              "订单数量",
              "管理员数量",
            ],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "30%",
            data: [
              this.resturants_count,
              this.foods_count,
              this.user_count,
              this.order_count,
              this.admin_count,
            ],
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "black",
                    fontSize: 16,
                  },
                },
              },
            },
          },
        ],
      };

      this.myChart.setOption(option);
    },
  },
  watch: {
    barData: function () {
      this.resturants_count = this.barData.count;
      this.initData();
    },
    foodsData: function () {
      this.foods_count = this.foodsData.count;
      this.initData();
    },
    userData: function () {
      this.user_count = this.userData.count;
      this.initData();
    },
    adminData: function () {
      this.admin_count = this.adminData.count;
      this.initData();
    },
    orderData: function () {
      this.order_count = this.orderData.count;
      this.initData();
    },
  },
};
</script>

<style lang="less">
@import "../style/mixin";
.visitorpie {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
